<template>
  <div class="projectList" style="padding: 0;">
    <!--    项目列表-->
    <div class="projectList">
      <div class="top">
        <div class="top-t">
          <label for="">筛选条件:</label>
          <div class="top-right">
            <el-tabs v-model="activeName">
              <el-tab-pane label="建设情况" name="first">
                <div class="project-status">
                  <div @click="development_building"><span
                    :class="screen.buildingProject?'active':''"></span>在建项目
                  </div>
                  <div @click="development_end"><span
                    :class="screen.endProject?'active':''"></span>完结项目
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="与我相关" name="second">
                <div class="project-status">
                  <div @click="screen.follow=!screen.follow"><span :class="screen.follow?'active':''"></span>我关注的</div>
                  <div @click="screen.partake=!screen.partake"><span :class="screen.partake?'active':''"></span>我参与的
                  </div>
                  <div @click="screen.created=!screen.created"><span :class="screen.created?'active':''"></span>我创建的
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="启动时间" name="third">
                <div class="project-status-time">
                  <el-date-picker
                    v-model="screen.startupTime"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-tab-pane>
              <el-tab-pane label="项目状况" name="fourth">
                <div class="project-status">
                  <div @click="screen.projectStatus=screen.projectStatus=='normal'?'':'normal'"><span
                    :class="screen.projectStatus=='normal'?'active':''"></span>正常
                  </div>
                  <div @click="screen.projectStatus=screen.projectStatus=='abnormal'?'':'abnormal'"><span
                    :class="screen.projectStatus=='abnormal'?'active':''"></span>异常
                  </div>
                  <div @click="screen.projectStatus=screen.projectStatus=='delay'?'':'delay'"><span
                    :class="screen.projectStatus=='delay'?'active':''"></span>延期
                  </div>
                  <div @click="screen.projectStatus=screen.projectStatus=='overdue'?'':'overdue'"><span
                    :class="screen.projectStatus=='overdue'?'active':''"></span>逾期
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="top-b" v-if="selectedScreen.length">
          <label for="">已选条件:</label>
          <div class="top-right">
            <ul class="screen-list">
              <li v-for="(item ,index) in selectedScreen" class="screen-item" :key="index">{{item.name}}<i
                @click="clearItemScreen(item)"></i></li>
              <li class="clear-screen" @click="clearScreen">清空条件</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content">
        <ul class="project-list">
          <li class="projectItem" v-for="(item,index) in projectList" :key="index">
            <div class="projectItem-left">
              <div class="progress pointer" @click="toProjectDetails(item.id)">
                <el-progress :color="item.overdue?'#ff8f2b':'#0a52e4'" :width="91" :stroke-width="8" type="circle"
                             :percentage="item.progressProportion"></el-progress>
              </div>
              <div class="warning" v-if="item.warning">
                <i></i>异常
              </div>
            </div>
            <div class="projectItem-right">
              <div class="info pointer" @click="toProjectDetails(item.id)">
                <h3 class="ellipsis1">{{item.shortName}}</h3>
                <p :class="['info-1',item.overdue?'delay':'']"><span>{{item.restTime}}</span></p>
                <p class="info-2">{{item.startTime}}<span v-if="!item.delay">至</span><span v-if="item.delay" style="color: #FF8F2B">延期至</span>{{item.endTime}}</p>
                <p class="info-3"><i></i>项目经理总结：{{item.xmjlReportContent||'无'}}</p>
              </div>
            </div>
            <span :class="['collection',item.attention?'active':'']" @click="attentionProject(item)"></span>
          </li>
        </ul>
        <div v-if="projectList.length==0" class="default-page">
          <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
          <p>暂无数据</p>
        </div>
      </div>
    </div>
    <loading v-if="is_show_loading"></loading>
  </div>
</template>

<script>
  import defaultProject from '@/components/defaultProject'
  import loading from '@/components/loading'
  export default {
    name: "ProjectList",
    components: {
      defaultProject,loading
    },
    data() {
      return {
        is_show_loading:true,
        activeName: 'first',
        screen: {
          building:'',//1 在建 2完结 空 全部
          buildingProject: false,//是否选择在建
          endProject: false,//是否选择完结
          startupTime: '',//启动时间
          follow: false,//关注
          partake: false,//参与
          created: false,//创建
          projectStatus: '',//项目状况 normal正常 abnormal异常 delay延期 overdue 逾期
        },//筛选条件
        selectedScreen: [
        ],//已选条件
        projectList: [],//项目列表
        projectType: '',//项目类型
      }
    },
    watch: {
      $route(newVal, oldVal) {
        console.log(newVal);
        console.log(oldVal);
        if (this.$route.query.attention == 1) {
          this.screen.follow = true;
        } else if (this.$route.query.attention == '') {
          this.screen.follow = false;
        }
        if (oldVal.query.projectType != newVal.query.projectType) {
          this.queryProjectList();
        }
      },
      'screen.building':{
        handler(newVal,oldVal) {
          let _this = this;
          if (oldVal) {
            _this.selectedScreen = _this.removeAaary(this.selectedScreen, {name: '在建项目', title: 'building'});
          }
          if(newVal==1){
            _this.selectedScreen.push({name: '在建项目', value: '1', title: 'building'});
          }else if(newVal==2){
            _this.selectedScreen.push({name: '完结项目', value: '2', title: 'building'});
          }else if(newVal==''){

          }
          this.queryProjectList();
        }, deep: true
      },
      'screen.follow': {
        handler(newVal) {
          if (newVal) {
            this.selectedScreen.push({name: '我关注的', value: '1', title: 'follow'});
          } else {
            this.selectedScreen = this.removeAaary(this.selectedScreen, {name: '我关注的', title: 'follow'})
          }
          this.queryProjectList();
        }, deep: true
      },
      'screen.partake': {
        handler(newVal) {
          if (newVal) {
            this.selectedScreen.push({name: '我参与的', value: '1', title: 'partake'});
          } else {
            this.selectedScreen = this.removeAaary(this.selectedScreen, {name: '我参与的', title: 'partake'})
          }
          this.queryProjectList();
        }, deep: true
      },
      'screen.created': {
        handler(newVal) {
          if (newVal) {
            this.selectedScreen.push({name: '我创建的', value: '1', title: 'created'});
          } else {
            this.selectedScreen = this.removeAaary(this.selectedScreen, {name: '我创建的', title: 'created'})
          }
          this.queryProjectList();
        }, deep: true
      },
      'screen.projectStatus': {
        handler(newVal, oldVal) {
          //有老值，清除老值
          if (oldVal) {
            this.selectedScreen = this.removeAaary(this.selectedScreen, {title: 'projectStatus'})
          }
          if (newVal == 'normal') {
            this.selectedScreen.push({name: '正常', title: 'projectStatus', value: 'normal'});
          } else if (newVal == 'abnormal') {
            this.selectedScreen.push({name: '异常', title: 'projectStatus', value: 'abnormal'});
          } else if (newVal == 'delay') {
            this.selectedScreen.push({name: '延期', title: 'projectStatus', value: 'delay'});
          } else if (newVal == 'overdue') {
            this.selectedScreen.push({name: '逾期', title: 'projectStatus', value: 'overdue'});
          }
          this.queryProjectList();
        }, deep: true
      },
      'screen.startupTime': {
        handler(newVal, oldVal) {
          if (newVal) {
            // console.log("有新值");
            if (oldVal == '') {
              // console.log("老值等于空");
              this.selectedScreen.push({name: newVal[0] + '-' + newVal[1], value: newVal, title: 'startupTime'});
            } else if (oldVal == null) {
              // console.log("老值等于null");
              this.selectedScreen.push({name: newVal[0] + '-' + newVal[1], value: newVal, title: 'startupTime'});
            } else if (oldVal.length) {
              // console.log("老值不等于空");
              this.selectedScreen = this.removeAaary(this.selectedScreen, {title: 'startupTime'});
              this.selectedScreen.push({name: newVal[0] + '-' + newVal[1], value: newVal, title: 'startupTime'});
            } else {
              this.selectedScreen.push({name: newVal[0] + '-' + newVal[1], value: newVal, title: 'startupTime'});
            }
          } else {
            // console.log("没有新值");
            this.selectedScreen = this.removeAaary(this.selectedScreen, {title: 'startupTime'})
          }
          this.queryProjectList();
        }, deep: true
      },
    },
    created() {
      this.queryProjectList();
    },
    methods: {
      //建设情况
      development_building(){
        console.log(this.screen.buildingProject);
        if(this.screen.buildingProject==true){
          this.screen.buildingProject=false;
          this.screen.building='';
        }else if(this.screen.buildingProject==false){
          this.screen.buildingProject=true;
          this.screen.building=1;
          if(this.screen.endProject==true){
            this.screen.endProject=false;
          }
        }
      },
      development_end(){
        console.log(this.screen.endProject);
        if(this.screen.endProject==true){
          this.screen.endProject=false;
          this.screen.building='';
        }else if(this.screen.endProject==false){
          this.screen.endProject=true;
          this.screen.building=2;
          if(this.screen.buildingProject==true){
            this.screen.buildingProject=false;
          }
        }
      },
      //删除单个筛选条件
      clearItemScreen(data) {
        this.screen[data.title] = false;
      },
      //清空筛选条件
      clearScreen() {
        let _this = this;
        this.selectedScreen.map(function (item, index) {
          _this.screen[item.title] = false;
        });
        this.screen['buildingProject']=false;
        this.screen['endProject']=false;
      },
      //删除数组中的某一个对象 _arr:数组 _obj:需删除的对象
      removeAaary(_arr, _obj) {
        var length = _arr.length;
        for (var i = 0; i < length; i++) {
          if (_arr[i].title == _obj.title) {
            if (i == 0) {
              _arr.shift(); //删除并返回数组的第一个元素
              return _arr;
            } else if (i == length - 1) {
              _arr.pop();  //删除并返回数组的最后一个元素
              return _arr;
            } else {
              _arr.splice(i, 1); //删除下标为i的元素
              return _arr;
            }
          }
        }
      },
      //去项目详情
      toProjectDetails(_id) {
        this.$router.push({
          path: '/project/info',
          query: {projectId: _id}
        });
      },
      //查询项目列表
      queryProjectList() {
        let _this = this;
        let params = {};
        params.comId = this.$store.state.userInfo.companyId;//企业id
        params.userId = this.$store.state.userInfo.userId;//用户id
        params.pageNum = 1;
        params.pageSize = 100;
        params.attention = this.$route.query.attention;
        //选中的筛选条件
        this.selectedScreen.map(function (item, index) {
          if (item.title == 'building' && item.value == 1) {
            params.running = 1;//传1为进行中
          } else if (item.title == 'building' && item.value == 2) {
            params.complete = 1;//传2为完结中
          } else if (item.title == 'building' && item.value == '') {
            params.complete = '';//传''为全部
          } else if (item.title == 'follow' && item.value == 1) {
            params.attention = 1;//关注
          } else if (item.title == 'partake' && item.value == 1) {
            params.mine = 1;//我参与的
          } else if (item.title == 'created' && item.value == 1) {
            params.myCreate = 1;//我创建的
          } else if (item.title == 'projectStatus' && item.value == 'normal') {
            params.normal = 1;//正常
          } else if (item.title == 'projectStatus' && item.value == 'overdue') {
            params.overdue = 1;//逾期
          } else if (item.title == 'projectStatus' && item.value == 'delay') {
            params.delay = 1;//延期
          } else if (item.title == 'projectStatus' && item.value == 'abnormal') {
            params.waring = 1;//异常
          } else if (item.title == 'startupTime') {
            params.startTime = item.value[0];
            params.limitTime = item.value[1];
          }
        });
        if (this.$route.query.projectType == 'all' || this.$route.query.projectType == undefined) {
          params.typeId = '';//项目分类id
        } else {
          params.typeId = this.$route.query.projectType;//项目分类id
        }
        this.$http.post('/project/project/list', params).then(function (res) {
          if (res.statusCode == 200) {
            _this.projectList=[];
            _this.projectList = res.data.list;
            setTimeout(function () {
              _this.is_show_loading=false;
            }, 1000);
          } else {
            _this.$message.error(res.statusMsg);
          }
        });
      },
      //是否关注项目
      attentionProject(item) {
        this.$http.post('project/project/attention', {
          projectId: item.id,
          userId: this.$store.state.userInfo.userId,
        }).then(function (res) {
          if (res.statusCode == 200) {
            item.attention = !item.attention;
          }
        });
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .projectList {
    width: 100%;
    height: 100%;
    /*padding: 24px 24px 26px 0;*/
    display: flex;
    flex-direction: column;

    .top {
      width: 100%;
      min-height: 126px;
      margin-bottom: 16px;
      background-color: #FFFFFF;
      border-radius: 6px;
      padding: 24px 32px 0 32px;

      > div {
        display: flex;

        label {
          width: 85px;
          padding-right: 22px;
          padding-top: 12px;
          font-size: 14px;
          color: #96a2aa;

        }

        .top-right {
          flex: 1;

          .project-status-time {
            padding: 10px 0 24px 0;
            /*height: 63.03px;*/
            .el-input__inner {
              border: none;
            }

            .el-input__inner {
              height: 29px;
              line-height: 29px;
            }
          }

          .project-status {
            display: flex;
            padding: 24px 0 24px 0;

            > div {
              width: 85px;
              margin-right: 40px;
              font-size: 14px;
              color: #96a2aa;
              cursor: pointer;
              position: relative;
              text-indent: 29px;

              span {
                position: absolute;
                width: 13px;
                height: 13px;
                background-color: #e2e9ef;
                border-radius: 2px;
                left: 0;
                top: 0;
              }

              span.active {
                background-image: url("../../../assets/img/project/projectList/right.png");
                background-size: 10px 7px;
                background-position: center;
                background-repeat: no-repeat;
              }
            }
          }

          .screen-list {
            overflow: hidden;
            margin-top: 2px;

            > li {
              float: left;
              padding: 10px 25px 10px 10px;
              color: #0a52e4;
              font-size: 14px;
              background-color: #f2f6f9;
              border-radius: 4px;
              position: relative;
              margin-right: 24px;
              margin-bottom: 24px;

              i {
                position: absolute;
                background-image: url("../../../assets/img/project/projectList/close.png");
                width: 8px;
                height: 8px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                right: 10px;
                top: 13px;
                cursor: pointer;
              }
            }

            .clear-screen {
              background-color: #FFFFFF;
              color: #96a2aa;
              cursor: pointer;
              padding-left: 0;
            }
          }
        }
      }

      .top-b {

      }
    }

    .content {
      width: 100%;
      flex: 1;
      background-color: #FFFFFF;
      border-radius: 6px;
      position: relative;
      overflow: hidden;

      .project-list {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 32px 0 0 32px;
        overflow: auto;

        li {
          width: calc((100% - 105px) / 3);
          height: 192px;
          margin-right: 32px;
          margin-bottom: 32px;
          border-radius: 6px;
          box-shadow: 0 0 20px rgba(10, 82, 228, 0.06);
          background-color: #FFFFFF;
          float: left;
          padding: 40px 32px 24px 32px;
          display: flex;
          position: relative;

          .projectItem-left {
            width: 112px;
            height: 112px;
            background: -webkit-linear-gradient(#f3f7f9, #fff); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(#f3f7f9, #fff); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(#f3f7f9, #fff); /* Firefox 3.6 - 15 */
            background: linear-gradient(#f3f7f9, #fff); /* 标准的语法 */
            border-radius: 50%;
            position: relative;

            .warning {
              position: absolute;
              bottom: -25px;
              left: 0;
              right: 0;
              margin: auto;
              width: 45px;
              height: 20px;
              color: #FC5A44;
              font-size: 14px;
              i {
                display: inline-block;
                width: 12px;
                height: 12px;
                background-image: url("../../../assets/img/project/projectList/warning_icon.png");
                background-size: 12px 12px;
                background-repeat: no-repeat;
                background-position: center;
                margin-right: 5px;
              }
            }

            .progress {
              position: absolute;
              width: 91px;
              height: 91px;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              margin: auto;
            }
          }

          .projectItem-right {
            flex: 1;
            position: relative;

            .info {
              position: absolute;
              width: 100%;
              height: 100%;
              padding-left: 32px;
              font-size: 14px;
              color: #96a2aa;

              h3 {
                font-size: 16px;
                color: #454a55;
              }

              .info-1 {
                padding-top: 17px;

                span {
                  color: #0a4fe0;
                  /*padding-left: 9px;*/
                }
              }

              .delay {
                color: #ff8f2b;

                span {
                  color: #ff8f2b;
                }
              }

              .info-2 {
                padding-top: 13px;
              }

              .info-3 {
                color: #454a55;
                padding-top: 14px;
                line-height: 1.4;
                text-indent: 22px;
                position: relative;

                i {
                  position: absolute;
                  left: 0;
                  top: 16px;
                  background-image: url("../../../assets/img/project/projectList/pinlun.png");
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: 14px 14px;
                  width: 14px;
                  height: 14px;
                }
              }
            }
          }

          .collection {
            position: absolute;
            width: 20px;
            height: 20px;
            right: 15px;
            top: 16px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url("../../../assets/img/project/projectList/start1.png");
            cursor: pointer;
          }

          .collection.active {
            background-image: url("../../../assets/img/project/projectList/start2.png");
          }
        }

        @media screen and (max-width: 1370px) {
          li {
            width: calc((100% - 70px) / 2);
            height: 192px;
            margin-right: 32px;
            margin-bottom: 32px;
            border-radius: 6px;
            box-shadow: 0 0 20px rgba(10, 82, 228, 0.06);
            background-color: #FFFFFF;
            float: left;
            padding: 40px 32px 24px 32px;
            display: flex;
            position: relative;

            .projectItem-left {
              width: 112px;
              height: 112px;
              background: -webkit-linear-gradient(#f3f7f9, #fff); /* Safari 5.1 - 6.0 */
              background: -o-linear-gradient(#f3f7f9, #fff); /* Opera 11.1 - 12.0 */
              background: -moz-linear-gradient(#f3f7f9, #fff); /* Firefox 3.6 - 15 */
              background: linear-gradient(#f3f7f9, #fff); /* 标准的语法 */
              border-radius: 50%;
              position: relative;

              .progress {
                position: absolute;
                width: 91px;
                height: 91px;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
              }
            }

            .projectItem-right {
              flex: 1;
              position: relative;

              .info {
                position: absolute;
                width: 100%;
                height: 100%;
                padding-left: 32px;
                font-size: 14px;
                color: #96a2aa;

                h3 {
                  font-size: 16px;
                  color: #454a55;
                }

                .info-1 {
                  padding-top: 17px;

                  span {
                    color: #0a4fe0;
                    padding-left: 9px;
                  }
                }

                .delay {
                  color: #ff8f2b;

                  span {
                    color: #ff8f2b;
                  }
                }

                .info-2 {
                  padding-top: 13px;
                }

                .info-3 {
                  color: #454a55;
                  padding-top: 14px;
                  line-height: 1.4;
                  text-indent: 22px;
                }
              }
            }

            .collection {
              position: absolute;
              width: 20px;
              height: 20px;
              right: 15px;
              top: 16px;
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-image: url("../../../assets/img/project/projectList/start1.png");
              cursor: pointer;
            }

            .collection.active {
              background-image: url("../../../assets/img/project/projectList/start2.png");
            }
          }
        }

      }

      .project-list::-webkit-scrollbar {
        display: none
      }

      -ms-overflow-style: none; /* IE 10+ */
      scrollbar-width: none; /* Firefox */
    }
  }
</style>
<style type="text/scss" lang="scss">
  .projectList {
    position: relative;
    .el-tabs__item {
      width: 96px !important;
      box-sizing: border-box;
      color: #96a2aa;
      font-size: 14px;
    }

    .el-tabs__item.is-active {
      border: 1px solid #eeeeee;
      border-radius: 6px 6px 0 0;
      text-align: center;
      color: #323234;
    }

    .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
      padding-left: 20px;
    }

    .el-tabs--top .el-tabs__item.is-top:last-child {
      padding-right: 20px;
    }

    .el-tabs__active-bar {
      width: 96px !important;
      background-color: #FFFFFF;
      left: -20px;
      transition: none;
    }

    .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: #eeeeee;
    }

    .el-date-editor .el-range-separator {
      width: 6%;
    }
  }
</style>
